<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				$("#employeeAddBtn").click(function(){
					var $empName = $("#employeeAddForm input[name=name]")[0]
					var $empEmail = $("#employeeAddForm input[name=email]")[0]
					var $empSalary = $("#employeeAddForm input[name=salary]")[0]
					
					$xxx = $("<tr></tr>").append(
						"<td>" + $empName.value + "</td>"
						+ "<td>" + $empEmail.value + "</td>"
						+ "<td>" + $empSalary.value + "</td>"
						+ "<td><a href='deleteEmp?id=003'>Delete</a></td>"
					).appendTo("#employeeTable tbody")
					.find("a")
					.click(clickDelete)
					
					$empName.value = ""
					$empEmail.value = ""
					$empSalary.value = ""
					return false
				})
				
				$("#employeeTable a").click(clickDelete)
				
				function clickDelete(){
					var $tr = $(this).parent().parent()
					var name = $tr.children(":first").html()
					if(confirm("确定删除" + name + "吗?")){
						$tr.remove()
					}
					return false
				}
			})
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th> </th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>Tom@atguigu.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=001">Delete</a></td>
			</tr>
			<tr>
				<td>Sherry</td>
				<td>Sherry@atguigu.com</td>
				<td>7000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>Bob@atguigu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<form id="employeeAddForm" action="add">
			<table>
				<tr>添加新员工</tr>
				<tr>
					<td>name</td>
					<td><input type="text" name="name"/></td>
				</tr>
				<tr>
					<td>email</td>
					<td><input type="text" name="email"/></td>
				</tr>
				<tr>
					<td>salary</td>
					<td><input type="text" name="salary"/></td>
				</tr>
				<tr><td colspan="2"><button id="employeeAddBtn" type="button">添加</button></td></tr>
			</table>
		</form>
	</body>
</html>
